<template>
 <div class="mobileDetail">
  <back-page></back-page>
   <!-- <van-search v-model="queryParams.name" @search="getList" placeholder="请输入流程名" style="margin:10px 0;"/> -->
  <div v-infinite-scroll="getList" class="scrollBox">
    <div v-for="(item,index) in processList" :key="index" class="processInfo" @click="goDetail(item)">
      <div class="infotitle">{{item.name}}</div>
      <div class="infodash" style="margin:10px 0;">
        <span class="infoleft">所属流程：</span>
        {{item.processInstance.name}}</div>
            <div class="infodash" style="margin:10px 0;">
        <span class="infoleft">流程发起人：</span>
        {{item.processInstance.startUserNickname}}</div>
      <div class="infodash">
        <span class="infoleft">创建时间：</span>
        {{parseTime(item.createTime)}}</div>
        <img :src="imgurl" alt="" v-if="item.suspensionState==1" class="processimgbox">
        
    </div>
  </div>
 </div>
</template>
<script>
import {getTodoTaskPage} from '@/api/bpm/task'
export default {
    props:['titleDetalles','editor','timeDetalles','contentDetalles'],
  data() {
    return {
        processList:[],
       queryParams: {
        pageNo: 1,
        pageSize: 49,
        name: null,
      },
      imgurl:require('@/assets/images/jihuo.png')
    };
  },
  created(){
this.getList();
  },
  methods:{
    getList(){
      //  this.queryParams.pageNo++;
       let params = {...this.queryParams};
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      getTodoTaskPage(params).then(response => {
        // this.processList.push(...response.data.list);
        this.processList = response.data.list;
      });
    },
    goDetail(row){
       this.$router.push({ path: "/bpm/process-instance/detail", query: { id: row.processInstance.id,tableId:row.formRecordId}});
    }
  }
};
</script>

<style lang="scss" scoped>
.mobileDetail{
        padding:10px;
        font-size: 14px;
        height:100vh;
        background:#f4f4f4;
        
    }
    .scrollBox {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.processInfo{
    min-height:80px;
    border-radius: 6px;
    margin:10px 0px;
    background:white;
    padding:16px;
    position: relative;
}
.infotitle{
    font-weight: bold;
}
.processimgbox{
  position:absolute;
  width:64px;
  height:64px;
  right:20px;
  top:50%;
  transform: translateY(-50%);
}
.infodash{
    font-size: 12px;
    color:#ccc;
    word-break: break-all;
    .infoleft{
        color:black;
    }
}
</style>
